<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的宿舍</title>
    <link rel="stylesheet" href="styles.css"> <!-- 外部样式表 -->
</head>
<body>
    <!-- 头部 -->
    <header>
        <h1>我的宿舍</h1>
        <p>欢迎来到我们的宿舍小天地！</p>
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#members">宿舍成员</a></li>
            <li><a href="#life">宿舍生活</a></li>
            <li><a href="#stories">宿舍故事</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>

    <!-- 宿舍成员 -->
    <section id="members">
        <h2>宿舍成员</h2>
        <div class="member-list">
            <!-- 成员1 -->
            <div class="member">
                <img src="member1.jpg" alt="张三">
                <h3>朱春昌</h3>
                <p><strong>专业：</strong>计算机科学与技术</p>
                <p><strong>兴趣爱好：</strong>篮球、编程</p>
                <p><strong>个性签名：</strong>代码改变世界！</p>
            </div>
            <!-- 成员2 -->
            <div class="member">
                <img src="t01dddae0846b983383.jpg" alt="李四">
                <h3>王俊文</h3>
                <p><strong>专业：</strong>电子信息工程</p>
                <p><strong>兴趣爱好：</strong>音乐、摄影</p>
                <p><strong>个性签名：</strong>用游戏记录生活！</p>
            </div>
            <!-- 成员3 -->
            <div class="member">
                <img src="tYx0MqygxV_small.jpg" alt="李四">
                <h3>段宇航</h3>
                <p><strong>专业：</strong>电子信息工程</p>
                <p><strong>兴趣爱好：</strong>游戏</p>
                <p><strong>个性签名：</strong>我是go学长！</p>
            </div>
            <!-- 成员4 -->
            <div class="member">
                <img src="3841.jpg_wh860.jpg" alt="李四">
                <h3>羊家涛</h3>
                <p><strong>专业：</strong>电子信息工程</p>
                <p><strong>兴趣爱好：</strong>还是游戏</p>
                <p><strong>个性签名：</strong>第五人格启动！</p>
            </div>
            <!-- 更多成员 -->
        </div>

        <!-- 宿舍全家福 -->
        <div class="group-photo">
            <h3>宿舍全家福</h3>
            <img src="group.jpg" alt="宿舍全家福">
        </div>

        <!-- 宿舍值日表 -->
        <div class="duty-table">
            <h3>宿舍值日表</h3>
            <table>
                <tr>
                    <th>星期</th>
                    <th>值日生</th>
                </tr>
                <tr>
                    <td>周一</td>
                    <td>王俊文</td>
                </tr>
                <tr>
                    <td>周二</td>
                    <td>朱春昌</td>
                </tr>
                <tr>
                    <td>周三</td>
                    <td>羊家涛</td>
                </tr>
                <tr>
                    <td>周四</td>
                    <td>段宇航</td>
                </tr>
                <tr>
                    <td>周五</td>
                    <td>猩猩一号</td>
                </tr>
                <tr>
                    <td>周六</td>
                    <td>猩猩二号</td>
                </tr>
                <tr>
                    <td>周天</td>
                    <td>猩猩三号</td>
                </tr>
                <!-- 更多值日安排 -->
            </table>
        </div>
    </section>

    <!-- 宿舍生活 -->
    <section id="life">
        <h2>宿舍生活</h2>
        <!-- 宿舍公约 -->
        <div class="convention">
            <h3>宿舍公约</h3>
            <ul>
                <li>作息时间：凌晨1点熄灯</li>
                <li>卫生值日：每天轮流打扫</li>
                <li>用电安全：离开宿舍断电</li>
            </ul>
        </div>

        <!-- 宿舍活动 -->
        <div class="activities">
            <h3>宿舍活动</h3>
            <ul>
                <li>2023年10月：宿舍聚餐</li>
                <li>2023年9月：校园篮球赛</li>
                <li>2023年8月：海边旅游</li>
            </ul>
        </div>

        <!-- 宿舍趣事 -->
        <div class="funny-stories">
            <h3>宿舍趣事</h3>
            <p>某天晚上，王半夜梦游，半夜打开电脑玩瓦他大喊：“我要成为瓦学弟”</p>
        </div>
    </section>

    <!-- 宿舍故事 -->
    <section id="stories">
        <h2>宿舍故事</h2>
        <!-- 宿舍日记 -->
        <div class="diary">
            <h3>宿舍日记</h3>
            <p><strong>2023年10月15日：</strong>今天我们一起完成了宿舍大扫除，感觉焕然一新！</p>
        </div>

        <!-- 宿舍回忆 -->
        <div class="memories">
            <h3>宿舍回忆</h3>
            <p>2023年团聚，我们一起拍了很多照片，留下了珍贵的回忆。</p>
        </div>

        <!-- 宿舍未来 -->
        <div class="future">
            <h3>宿舍未来</h3>
            <p>希望我们毕业后还能常联系，友谊长存！</p>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about">
        <h2>关于我们</h2>
        <!-- 网站简介 -->
        <div class="intro">
            <h3>网站简介</h3>
            <p>本网站旨在记录我们宿舍的点点滴滴，分享我们的生活和故事。</p>
        </div>

        <!-- 联系我们 -->
        <div class="contact">
            <h3>联系我们</h3>
            <p>如有任何问题或建议，请致电：<a href="18878513142">admin@mysite.com</a></p>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 我的宿舍. 保留所有权利.</p>
    </footer>
</body>
</html>